
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<link type="text/css" rel="stylesheet" href="/stylesheets/main.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="zh-cn">
<link rel="shortcut icon" href="/pic/gaeicon.ico" />
<script src="http://www.google.com/jsapi?key=ABQIAAAAGnBq5bNmvvTftATVv65VDxS34f1WIB6VtjUvfg6zsJkZhl5syhQJ3I9zvMYU73A4RAzB_MI0Vb3llw" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="/js/jquery.flot.js"></script>
<script src="/js/jquery.flot.crosshair.js"></script>
<script src="/js/jquery.flot.navigate.js"></script>
<script src="/js/json2.js"></script>
</head>
<body >
<div id="container"> 
        <h1 id="title">北京市房地产每日交易数据</h1> 
        <div id="tab">
            <div class="item" id="tab1">图表</div> <div class="item" id="tab2">数据</div> <div class="item" id="tab4">北京空气污染指数</div> <div class="item" id="tab3">关于</div> </div>
        <div class="tab1">
            <div id="plot0holder"></div> 
            <div id="overviewLegend0"><p id="Legend0"></p></div>
            <div id="plot1holder"></div> 
            <div id="overviewLegend1"><p id="Legend1"></p></div>
        </div>
        <div class="tab2">
            <table id="oTable" border="1">
               <tr class="thead">
                   <td rowspan="2">日期</td> <td colspan="2">期房网上签约住宅</td> <td colspan="2">现房网上签约住宅</td> <td colspan="2">存量房网上签约住宅</td>
               </tr>
               <tr class="thead">
                   <td>套数</td> <td>面积</td> <td>套数</td> <td>面积</td> <td>套数</td> <td>面积</td>
               </tr>
               <tbody id="oTBody"> </tbody>
            </table> 
        </div>
        <div class="tab3">
            <div id="about">
                This is just for fun
                <table>
                    <tr>
                        <td align="right">Number 1: <input id="num1" type="text" value="1" /><br />
                        Number 2: <input id="num2" type="text" value="2" /><br />
                        <input type="button" value="Add" onclick="doAdd()" style="width:100%" /><br>
                        Result: <input id="result" type="text" value="" readonly="true" disabled="true" /></td>
                    </tr>
                    <tr>
                        <form action="/fetch" method="post"> <input class="button" type="submit" value="update"> </form>
                    </tr>
                </table>
            
            </div>
        </div>
        <div class="tab4">
                <div id="feed"></div>
        </div>
        <div id="copyright">网站建设中，建议使用Chrome浏览，其它浏览器可能无法正常显示内容。<br>数据来源:<a href="http://www.bjfdc.gov.cn">北京市房地产交易管理网</a><br><pre>          <a href="http://twitter.com/statuses/user_timeline/15527964.rss">BeijingAir</a></pre><br>Mail to: <img src="/pic/image.png"><br><img src="http://code.google.com/appengine/images/appengine-silver-120x30.gif" alt="由 Google App Engine 提供支持"></div>

</div>
<script id="source" language="javascript" type="text/javascript"> 

    if( !window.XMLHttpRequest ) XMLHttpRequest = function() {
      try{ return new ActiveXObject("Msxml2.XMLHTTP.6.0") }catch(e){}
      try{ return new ActiveXObject("Msxml2.XMLHTTP.3.0") }catch(e){}
      try{ return new ActiveXObject("Msxml2.XMLHTTP") }catch(e){}
      try{ return new ActiveXObject("Microsoft.XMLHTTP") }catch(e){}
      throw new Error("Could not find an XMLHttpRequest alternative.")
    };
 
    function Request(function_name, opt_argv) {

      if (!opt_argv)
        opt_argv = new Array();

      // Find if the last arg is a callback function; save it
      var callback = null;
      var len = opt_argv.length;
      if (len > 0 && typeof opt_argv[len-1] == 'function') {
        callback = opt_argv[len-1];
        opt_argv.length--;
      }
      var async = (callback != null);

      // Encode the arguments in to a URI
      var query = 'action=' + encodeURIComponent(function_name);
      for (var i = 0; i < opt_argv.length; i++) {
        var key = 'arg' + i;
        var val = JSON.stringify(opt_argv[i]);
        query += '&' + key + '=' + encodeURIComponent(val);
      }
      query += '&time=' + new Date().getTime(); // IE cache workaround

      // Create an XMLHttpRequest 'GET' request w/ an optional callback handler
      var req = new XMLHttpRequest();
      req.open('GET', '/rpc?' + query, async);

      if (async) {
        req.onreadystatechange = function() {
          if(req.readyState == 4 && req.status == 200) {
            var response = null;
            try {
             response = JSON.parse(req.responseText);
            } catch (e) {
             response = req.responseText;
            }
            callback(response);
          }
        }
      }

      // Make the actual request
      req.send(null);
    }

    // Adds a stub function that will pass the arguments to the AJAX call
    function InstallFunction(obj, functionName) {
      obj[functionName] = function() { Request(functionName, arguments); }
    }
    
    var server = {};

    // Insert 'Add' as the name of a callable method
    InstallFunction(server, 'Add');



    // Client function that calls a server rpc and provides a callback
    function doAdd() {
      server.Add($("#num1").val(), $("#num2").val(), onAddSuccess);
    }

    // Callback for after a successful doAdd
    function onAddSuccess(response) {
      $("#result").val(response);
    }
 
    var qfts = {{qfts}} ;
    var xfts = {{xfts}} ;
    var clfts = {{clfts}} ;
    var qfmj = {{qfmj}};
    var xfmj = {{xfmj}};
    var clfmj = {{clfmj}};
    
    for (i=qfts.length-1;i>=0;i=i-1){
        oRow = oTBody.insertRow(0);
        var ldate=oRow.insertCell(0);
        var lqfts =oRow.insertCell(1);
        var lqfmj =oRow.insertCell(2);
        var lxfts =oRow.insertCell(3);
        var lxfmj =oRow.insertCell(4);
        var lclfts=oRow.insertCell(5);
        var lclfmj=oRow.insertCell(6);
        var dt = new Date();
        dt.setTime(qfts[i][0]);
        var st = dt.getFullYear()+"-"+
                 (dt.getMonth()+1)+"-"+
                 dt.getDate();
        ldate.innerHTML = st;
        ldate.className = "td_date";
        lqfts.innerHTML = qfts[i][1];
        lqfts.className = "td_qfts";
        lqfmj.innerHTML = qfmj[i][1];
        lqfmj.className = "td_qfmj";
        lxfts.innerHTML = xfts[i][1];
        lxfts.className = "td_xfts";
        lxfmj.innerHTML = xfmj[i][1];
        lxfmj.className = "td_xfjm";
        lclfts.innerHTML=clfts[i][1];
        lclfts.className = "td_clfts";
        lclfmj.innerHTML=clfmj[i][1];
        lclfmj.className = "td_clfmj";
    }

    var options = {
        series: { lines: { show: true }, points: {show:true} },
        crosshair: { mode: "xy" },
        grid: { hoverable: true, autoHighlight: false },
        xaxis: { mode: "time", zoomRange:null, panRange:null },
        yaxis: { zoomRange:null, panRange:null },
        zoom: { interactive: true },
        pan: { interactive: true },
        legend: { show: true, container: $("#Legend0") }
    };
    

    var plot0 = $.plot($("#plot0holder"),
            [
                { label: "期房成交套数", data:qfts},
                { label: "现房成交套数", data:xfts},
                { label: "存量房成交套数", data:clfts}
            ],
            options
         );
    var legends0 = $("#plot0holder .legendLabel0");
    legends0.each(function () {
        $(this).css('width', $(this).width());
    });
    
    function showTooltip0(x, y, contents) {
        $('<div id="tooltip0">' + contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
    }
 
    var previousPoint0 = null;
    
    $("#plot0holder").bind("plothover", function (event, pos, item) {
 
            if (item) {
                if (previousPoint0 != item.datapoint) {
                    previousPoint0 = item.datapoint;
                    
                    $("#tooltip0").remove();
                    var x = item.datapoint[0],
                        y = item.datapoint[1];
                    var dt = new Date();
                    dt.setTime(x);
                    var st = dt.getFullYear()+"-"+
                             (dt.getMonth()+1)+"-"+
                             dt.getDate();
                    showTooltip0(item.pageX, item.pageY,
                                st+" "+item.series.label + " " + y);
                }
            }
            else {
                $("#tooltip0").remove();
                previousPoint0 = null;            
            }
    }); 

    $('<div class="button" style="right:20px;top:20px">zoom out</div>').appendTo(plot0holder).click(function (e) {
        e.preventDefault();
        plot0.zoomOut();
    });



    $(document).ready(function() {
        $("#tab div:first").addClass("current");
        $(".tab2").hide();
        $(".tab3").hide();
        $(".tab4").hide();
        $("#tab div").click(function() {
            $("#tab div").removeClass("current");
            $(this).addClass("current");
            $(".tab1").hide();
            $(".tab2").hide();
            $(".tab3").hide();
            $(".tab4").hide();
            $("." + $(this).attr("id")).fadeIn('slow');
        });
    });

    //rss api
    google.load("feeds", "1");

    function initialize() {
        var reg = new RegExp('(\d+-\d+-\d+); (\d+:\d+); PM2.5; (\d+(?:.\d+)*); (\d+); .*\/\/ Ozone; ((?:-){0,1}\d+(?:\.\d+)*); (\d+); ');
        var feed = new google.feeds.Feed("http://twitter.com/statuses/user_timeline/15527964.rss");
        var dt = new Date();
        var pml = new Array();
        var pmh = new Array();
        var ozl = new Array();
        var ozh = new Array();
        feed.includeHistoricalEntries();
        feed.setNumEntries(2000);
        feed.load(function(result) {
            if (!result.error) {
                var container = document.getElementById("feed");
                //var year = new Array();
                //var month = new Array();
                //var day = new Array();
                //var hour = new Array();
                //var minute = new Array();
                for (var i = 0; i < result.feed.entries.length; i++) {
                    var entry = result.feed.entries[i];
                    var div = document.createElement("div");
                    var tmpl = entry.title.split("//");
                    //tmpl[0] is BeijingAir: 12-16-2010; 16:00; PM2.5; 81.0; 160; Unhealthy 
                    //tmpl[1] is Ozone; 6.5; 5; Good 
                    var tmpl0 = tmpl[0].split(":");
                    //tmpl0 [0]:  BeijingAir
                    //      [1]:   12-16-2010; 16
                    //      [2]:   00; PM2.5; 81.0; 160; Unhealthy
                    if (tmpl0.length==4){
                        tmpl0[2] = tmpl0[2]+tmpl0[3];
                    }
                    var tmpl1 = tmpl0[1].split(";");
                    //tmpl1,
                    //       0:date,
                    //       1:hour,
                    var tmpl2 = tmpl1[0].split("-");
                    //tmpl2 0:month 1:day 2:year
                    var tmpl3 = tmpl0[2].split(";");
                    //  [0]: minutes
                    //  [1]: PM2.5
                    //  [2]: pm low
                    //  [3]: pm high
                    //  [4]: unhealthy

                    //tmpl[1] is Ozone; 3.9;3; Good
                    var tmpl4 = tmpl[1].split(";");
                    //tmpl4 0: Ozone 1:3.9 2:3 4: Good

                    dt.setFullYear(parseInt(tmpl2[2]), parseInt(tmpl2[0]), parseInt(tmpl2[1]));
                    dt.setHours(parseInt(tmpl1[1]));
                    //month.push(        tmpl2[0] );
                    //day.push(          tmpl2[1] );
                    //year.push(         tmpl2[2] );
                    //hour.push(         tmpl1[1] );
                    //minute.push(       tmpl3[0] );
                    pml.push([dt.getTime(),          tmpl3[2] ] );
                    pmh.push([dt.getTime(),          tmpl3[3] ] );
                    ozl.push([dt.getTime(),          tmpl4[1] ] );
                    ozh.push([dt.getTime(),          tmpl4[2] ] );

                    //div.appendChild(document.createTextNode(entry.title));
                    div.appendChild(document.createTextNode(dt.toString()+ tmpl3[2]+ tmpl3[3]+ tmpl4[1]+ tmpl4[2]));
                    container.appendChild(div);
                } //end of forloop
                //plot 0 end plot 1 begin
                var options = {
                    series: { lines: { show: true }, points: {show:true} },
                    crosshair: { mode: "xy" },
                    grid: { hoverable: true, autoHighlight: false },
                    xaxis: { mode: "time", zoomRange:null, panRange:null },
                    yaxis: { zoomRange:null, panRange:null },
                    zoom: { interactive: true },
                    pan: { interactive: true },
                    legend: { show: true, container: $("#Legend1") }
                };
                var plot1 = $.plot($("#plot1holder"),
                        [
                            { label: "PM2.5 low", data:pml},
                            { label: "PM2.5 high", data:pmh},
                            { label: "Ozone low", data:ozl},
                            { label: "Ozone high", data:ozh}
                        ],
                        options
                     );
                var legends1 = $("#plot1holder .legendLabel1");
                legends1.each(function () {
                    $(this).css('width', $(this).width());
                });

                function showTooltip1(x, y, contents) {
                    $('<div id="tooltip1">' + contents + '</div>').css( {
                        position: 'absolute',
                        display: 'none',
                        top: y + 5,
                        left: x + 5,
                        border: '1px solid #fdd',
                        padding: '2px',
                        'background-color': '#fee',
                        opacity: 0.80
                    }).appendTo("body").fadeIn(200);
                }
                
             
                var previousPoint1 = null;
                
                $("#plot1holder").bind("plothover", function (event, pos, item) {
             
                        if (item) {
                            if (previousPoint1 != item.datapoint) {
                                previousPoint1 = item.datapoint;
                                
                                $("#tooltip1").remove();
                                var x = item.datapoint[0],
                                    y = item.datapoint[1];
                                var dt = new Date();
                                dt.setTime(x);
                                var st = dt.getFullYear()+"-"+
                                         (dt.getMonth()+1)+"-"+
                                         dt.getDate();
                                showTooltip1(item.pageX, item.pageY,
                                            st+" "+item.series.label + " " + y);
                            }
                        }
                        else {
                            $("#tooltip1").remove();
                            previousPoint1 = null;            
                        }
                }); 

                $('<div class="button" style="right:20px;top:20px">zoom out</div>').appendTo(plot1holder).click(function (e) {
                    e.preventDefault();
                    plot1.zoomOut();
                });
                //plot 1 end 
            }   //end of if
      }); //end of function on load
    }
    google.setOnLoadCallback(initialize);
    

</script> 

</body>
</html>

